Ext.ns("sh.mytool.cv.module");

sh.mytool.cv.module.ImagePanel = Ext.extend(Ext.Panel, {
    pageSize: 12,
    galleryPanel: "",
    queryUrl: "",
    getUrl : "",
    editUrl : "",
    removeUrl: "",
    imageRoot: "",
    power: "",
    initComponent : function() {
        this.store = new Ext.data.JsonStore({
            autoDestroy : true,
            proxy : new Ext.data.HttpProxy({
                method : 'post',
                url : this.queryUrl
            }),
            root : 'resultList',
            idProperty : 'id',
            totalProperty : 'totalRecord',
            fields : [
                {name: 'id'},
                {name: 'name'},
                {name: 'url', mapping: 'imageFile', convert: function(v) {
                    if(v){
                        return v.path.replace(/\\/g, "/");
                    }else{
                        return "";
                    }
                }}
            ],
            remoteSort : true
        });
        this.store.load({
            params: {start: 0, limit: this.pageSize}
        });
        var tpl = new Ext.XTemplate(
            '<tpl for=".">',
                '<div class="thumb-wrap" id="{name}">',
                    '<div class="thumb"><img src="' + this.imageRoot + '{url}" title="{name}"></div>',
                    '<span class="x-editable">{shortName}</span>',
                '</div>',
            '</tpl>',
            '<div class="x-clear"></div>'
        );
        this.dataView = new Ext.DataView({
            autoScroll: true,
            store: this.store,
            tpl: tpl,
            autoHeight: true,
            singleSelect: true,
            loadingText: "Please wait...",
            overClass: 'x-view-over',
            itemSelector: 'div.thumb-wrap',
            emptyText: 'No images to display',
            style: 'border: 0',
            prepareData: function(data){
                data.shortName = Ext.util.Format.ellipsis(data.name, 25);
                return data;
            },
            listeners: {
                 render: function() {
                     // After the component has been rendered, disable the default browser context menu
                     Ext.getBody().on("contextmenu", Ext.emptyFn, null, {preventDefault: true});
                 }
//              dblclick: function(view, index, node, e) {
//                  var selNode = view.getSelectedRecords();
//              }
            }
        });
        this.tbar = [
            {text: "Add", handler: this.toAdd, scope: this, hidden: this.power.hidden},
            {text: "Modify", handler: this.toModify, scope: this, hidden: this.power.hidden},
            {text: "Remove", handler: this.toRemove, scope: this, hidden: this.power.hidden},
            {text: "Back", handler: this.toReturn, scope: this}
        ],
        this.bbar = new Ext.PagingToolbar({
            store: this.store,
            pageSize: this.pageSize,
            displayInfo :true
        });
        sh.mytool.cv.module.GalleryPanel.superclass.initComponent.call(this);
        this.dataView.on("dblclick", function(view, index, node, e) {
            view.select(node);
            this.showImage();
        }, this);
        // get wiki link
        this.dataView.on("contextmenu", function(view, index, node, e){
            view.select(node);
            if(!this.cmenu){
                this.cmenu = new Ext.menu.Menu({
                    items : {
                        text : 'Wiki Link',
                        scope : this,
                        handler : this.getWikiLink
                    }
                });
            }
            this.cmenu.showAt(e.getXY());
            e.stopEvent();
        }, this);
        this.add(this.dataView);
    },
    toReturn: function(){
        this.galleryPanel.show();
        this.destroy();
    },
    getWikiLink: function(){
        var data = this.getSelectData();
//        var wikiLink = "[" + this.imageRoot + data.url + "]";
        var wikiLink = "<wiki:image url='"+ this.imageRoot + data.url + "' height='400' width='600'></wiki:image>";
        alert(wikiLink);
    },
    showImage: function(){
        var data = this.getSelectData();
        if(!this.playWin){
            this.playWin = new Ext.Window({
                title: data.name,
                modal: true,
                closeAction: "hide"
            });
        }
        var html = "<div style=\"max-height:600px;overflow-x:hidden;\"><img src=\"" + this.imageRoot + data.url + "\" style=\"max-width:800px;width:expression(document.body.clientWidth>800?'800px':'auto';);\"></img></div>";
        if (this.playWin.body) {
            this.playWin.update(html);
        } else {
            this.playWin.html = html;
        }
        this.playWin.show();
    },
    getEditWin : function() {
        if (!this.win) {
            var formPanel = new Ext.form.FormPanel({
                labelAlign : "right",
                labelWidth : 50,
                border : false,
                layout : "form",
                method : "post",
                fileUpload: true,
                items : [ {
                    height : 15,
                    border : false
                }, {
                    xtype : "hidden",
                    name : "id"
                },
                {
                    xtype : "textfield",
                    fieldLabel : "name",
                    name : "name"
                } ,
                {xtype: "textfield", fieldLabel: "cover", inputType:"file", name: "file"}
                ],
                buttonAlign : "center",
                buttons : [ {
                    text : "Save",
                    scope : this,
                    handler : this.submitForm
                },
                {
                    text : "Close",
                    scope : this,
                    handler : function() {
                        this.win.hide();
                    }
                } ]
            });
            this.win = new Ext.Window({
                title : "Edit Image",
                width : 400,
                height : 250,
                closeAction : 'hide',
                modal : true,
                layout : 'fit',
                items : [ formPanel ]
            });
        }
    },
    toAdd : function() {
        this.getEditWin();
        this.cleanForm();
        // setHidden
        this.win.show();
    },
    toModify : function() {
        this.getEditWin();
        this.cleanForm();
        this.loadForm();
        this.win.show();
    },
    toRemove : function() {
        Ext.Msg.confirm("Tip", "Delete Image ?", function(btn) {
            if (btn == "yes") {
                var id = this.getSelectData().id;
                var wartMsg = Ext.Msg.wait("", "Please Wait...");
                Ext.Ajax.request({
                    url : this.removeUrl,
                    params : {
                        id : id
                    },
                    method : "post",
                    async : false,
                    scope : this,
                    success : function(resp, opts) {
                        wartMsg.hide();
                        Ext.Msg.alert("Tip", "Success!");
                        this.toRefresh();
                    },
                    failure : function(resp, opts) {
                        wartMsg.hide();
                        Ext.Msg.alert("Tip", "Failed!");
                    }
                });
            }
        }, this);
    },
    toRefresh : function() {
        this.store.reload();
    },
    getSelectData: function(){
        var selNode = this.dataView.getSelectedRecords();
        return selNode[0].data;
    },
    cleanForm : function() {
        this.win.getComponent(0).getForm().reset();
    },
    loadForm : function() {
        var id = this.getSelectData().id;
        this.win.getComponent(0).getForm().load({
            url : this.getUrl,
            params : {
                id : id
            },
            method : "post",
            waitMsg : "",
            success : function(form, action) {
            },
            failure : function(form, acition) {
            }
        });
    },
    submitForm : function() {
        this.win.getComponent(0).getForm().submit({
            url : this.editUrl,
            scope : this,
            waitMsg : "",
            success : function(form, action) {
                this.win.hide();
                Ext.Msg.alert("Tip", "Success!");
                this.toRefresh();
            },
            failure : function(form, acition) {
                Ext.Msg.alert("Tip", "Failed!");
            }
        });
    }
});
